<template>
  <section>
    <el-dialog width="1500px" title="手动添加客户" :visible.sync="personalDialogVisiable" :close-on-click-modal="false">
      <ue-search-bar :data="querys" ref="ueSearchBar" v-model="groupTypeForm">
      </ue-search-bar>
      <el-col>
        <el-button type="primary" @click.native="resetPersonalGroupFilter" class="mButton mButtonRight">重置</el-button>
        <el-button type="primary"  @click.native="searchForManualAddPersonals" class="mButton mButtonRight">查询</el-button>
      </el-col>
      <el-table :data="personalGroupTableData" highlight-current-row border @selection-change="handleManuSelections">
        <el-table-column type="selection" label="序号" min-width="60"></el-table-column>
        <el-table-column prop="realName" label="客户名称" min-width="150"></el-table-column>
        <el-table-column prop="phone" label="联系手机" min-width="150"></el-table-column>
        <el-table-column prop="enterprise" label="企业名称" min-width="120"></el-table-column>
        <el-table-column prop="createDate" label="注册日期" min-width="120">
          <template slot-scope="scope">
            <label v-if="scope.row.createDate != null">{{scope.row.createDate.substring(0,10)}}</label>
          </template>
        </el-table-column>
        <el-table-column prop="partnerName" label="邀请人" min-width="100"></el-table-column>
        <el-table-column prop="partnerName" label="所在城市" min-width="150">
          <template slot-scope="scope">
            {{scope.row.province}}{{scope.row.city}}{{scope.row.city}}
          </template>
        </el-table-column>
      </el-table>
      <!--工具条-->
      <el-row>
        <el-col :span="24" class="toolbar">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :total="total" style="float: right;">
          </el-pagination>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button @click.native="handleManualAddPersonal" style="margin-top: 10px" type="primary" class="mButton mButtonRight">添加</el-button>
          <el-button class="mButton mButtonRight" style="margin-top: 10px" @click.native="cancleManualAddPersonal">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </section>
</template>

<script>
import {getAllMebPersonals} from '../../api/v3/MebPersonal';
import {addMebPersonsForPersonalGroup} from '../../api/v3/PersonalGroup';
export default {
  name: 'personal-group-manual-add',
  componentName: 'personal-group-manual-add',
  data () {
    return {
      selected: {},
      groupTypeForm: {},
      personalGroupTableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      filters: '',
      personalDialogVisiable: false,
      sels: [],
      submitLoading: false
    };
  },
  methods: {
    show (o) {
      this.selected = o;
      this.manualAddPersonal();
    },
    manualAddPersonal () {
      this.personalDialogVisiable = true;
      this.resetPersonalGroupFilter();
      this.getPersonalGroupTableData('');
      this.sels = [];
    },
    getPersonalGroupTableData (filters) {
      getAllMebPersonals({
        filters: filters,
        page: this.currentPage - 1,
        size: this.pageSize
      }).then(res => {
        this.personalGroupTableData = res.data;
        this.total = Number(res.headers['x-total-count']);
      });
    },
    handleManuSelections (val) {
      this.sels = val;
    },
    searchForManualAddPersonals () {
      this.filters = '' + this.$ue.objToFilter(this.groupTypeForm);
      this.getPersonalGroupTableData(this.filters);
    },
    cancleManualAddPersonal () {
      this.personalDialogVisiable = false;
    },
    handleManualAddPersonal () {
      if (this.sels.length < 1) {
        this.$message.error('添加用户不能为空');
        return;
      }
      let personalIds = '';
      for (let p in this.sels) {
        if (p < this.sels.length) {
          personalIds += this.sels[p].id + ',';
        }
      }
      addMebPersonsForPersonalGroup(this.selected.id, personalIds).then((res) => {
        this.personalDialogVisiable = false;
        this.$emit('addSuccess', true);
      });
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.getPersonalGroupTableData(this.filters);
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      this.getPersonalGroupTableData(this.filters);
    },
    resetPersonalGroupFilter () {
      if (this.$refs.ueSearchBar !== undefined) {
        this.$refs.ueSearchBar.reset();
      }
      this.filters = '';
    }
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys['/message/personalGroup#manualAddMebPersonal'] || [];
    }
  },
  // 初始化数据
  mounted () {
    this.$store.commit('initDict');
  }
};
</script>

<style lang="less">
  .mButton {
    margin-bottom: 10px;
  }

  .mButtonRight {
    float: right;
    margin-right: 10px;
  }
</style>
